<template>
  <div class="photo">
    <!-- 头部区 -->
    <header>
      <van-row
        class="album_banner clearfix"
        type="flex"
        justify="space-between"
      >
        <van-col :span="18">
          <van-row type="flex">
            <van-col :span="5">
              <van-image width="50" height="50" :src="user_img" round />
            </van-col>
            <van-col :span="18">
              <van-row class="username" style="height: 25px">
                {{ username }}
              </van-row>
              <van-row style="height: 10px">
                <van-progress
                  color="#d6997a"
                  :percentage="preNum"
                  :show-pivot="false"
                />
              </van-row>
              <van-row>
                {{ user_memory }}
              </van-row>
            </van-col>
          </van-row>
        </van-col>

        <!-- 右侧栏 -->
        <van-col :span="6" @click="toNewAlbum">
          <img src="../../static/images/create_album.png" alt="" />
        </van-col>
      </van-row>
    </header>
    
    <!-- 搜索框 -->
    <div class="search">
      <van-search
        v-model="search_value"
        placeholder="搜索"
        input-align="center"
        @blur="search_album"
      />
    </div>

    <!-- 相册区 -->
    <div class="album">
      <van-row type="flex">
        <van-col
          :span="12"
          @click="toPic(i)"
          style=""
          v-for="(album_msg, i) in albumList"
          :key="i"
          v-lazy="album_msg"
        >
          <van-image
            width="10rem"
            height="10rem"
            fit="cover"
            :src="album_msg.album_url"
            class="album-img"
          />
          <div style="margin-left: 7px">
            <span>{{ album_msg.album_name }}</span>
            <van-tag color="#e6e6e6" text-color="#929292" round size="medium">{{
              album_msg.album_type
            }}</van-tag>
            <div>
              <span>{{ album_msg.album_num }}张</span
              ><span style="margin-left: 15px">{{
                album_msg.album_power
              }}</span>
            </div>
          </div>
        </van-col>
      </van-row>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      //角色信息
      username: "",
      user_memory: "3.2G/6G",
      //进度条的长度
      preNum: "50",
      //用户头像
      user_img: "",
      //输入的搜索框的内容
      search_value: "",
      //相册信息
      albumList: [],
    };
  },
  created() {
    this.getAlbum();
  },
  methods: {
    //获取用户所有相册
    getAlbum() {
      this.request.get("/showAlbum").then((res) => {
        // console.log(res);
        if (res.status !== 0) {
          this.$toast("暂无多余数据!");
        } else {
          this.albumList = res.data;
          this.username = res.data[0].username;
          this.user_img = res.data[0].user_url;
        }
      });
    },
    //搜索框输入后触发的事件
    async search_album() {
      // console.log(this.search_value);
      //获取模糊查询的信息
      if (this.search_value) {
        const res = await this.request.get("/album", {
          value: this.search_value.concat("%"),
        });
        if (res.status != 0) {
          return this.$toast("查询失败!");
        } else {
          this.albumList = null;
          this.albumList = res.data;
        }
      } else {
        this.getAlbum()
      }
    },
    toPic(index) {
      this.$router.push({
        path: "/pics/" + index,
        query: { album_name: this.albumList[index].album_name },
      });
    },
    toNewAlbum() {
      this.$router.push({ path: "/newAlbum" });
    },
  },
};
</script>

<style lang="less" scoped>
.photo {
  overflow: hidden;
  width: 750rpx;
  height: 100%;
  margin: 0 auto;
  header {
    width: 100%;
    margin: 0 auto;
    padding: 2.9% 5.9%;
    height: 7.1%;
    box-sizing: border-box;
    background-color: #f1bf83;
    font-family: "SourceHanSansCN";
    font-size: 0.8em;
    color: rgb(255, 255, 255);

    .van-col--6 {
      width: 6.9%;
      float: right;
      margin-top: 3.7%;

      img {
        width: 100%;
      }
    }

    .album_banner {
      display: block;
    }

    .clearfix::after {
      content: "";
      display: block;
      clear: both;
    }

    .van-col {
      margin-right: 2%;
    }

    .username {
      margin-bottom: 0.9%;
    }
  }

  .search {
    width: 100%;
    padding: 3% 6.6%;
    box-sizing: border-box;
    height: 14.2%;

    .van-search {
      padding: 0;
    }
  }

  .album {
    width: 100%;
    box-sizing: border-box;
    padding: 0 4.9%;
    height: 100%;

    .van-col:nth-child(2n + 1) {
      margin-bottom: 8.8%;
      margin-right: 5.3%;
    }

    .van-col--12 {
      width: 47.3%;
    }
    // background-color: pink;
    /deep/ .album-img img {
      border-radius: 8px;
    }
  }
}
</style>